<div class="dashboard-box relative">
  @if (content.title || content.form) {
    <div class="box-header flex flex-wrap justify-between items-center">
      @if (content.title) {
        <div class="mat-h3 m-bottom-0" [attr.data-path]="'title.label'" contentedit="label">
          {{ content.title.label }}
        </div>
      }
      <div class="filter flex justify-center items-center gap-4">
        @if (content.form) {
          <app-formly
            [form]="form"
            [model]="model"
            [fields]="content.form"
            (modelChange)="onModelChange($event)"
          />
        }
        @if (content.params?.api) {
          <app-icon (click)="reload()" [content]="{ svg: 'reload' }" />
        }
      </div>
    </div>
  }
  @if (widget$ | async; as widget) {
    <app-dynamic-component [attr.data-path]="'widget'" [inputs]="widget" />
  }
  @if (loading()) {
    <div class="loading-inner">
      <app-loading />
    </div>
  }
</div>
